<!--
 * @Author: LZQ lzq518@163.com
 * @Date: 2024-09-06 16:45:53
 * @LastEditors: LZQ lzq518@163.com
 * @LastEditTime: 2024-12-13 23:27:02
 * @FilePath: \RuoYi-Vue3\src\views\shop\cash\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script setup name="cash">
import topView from "@/views/shop/layout/top.vue";
import goodsView from "@/views/shop/goods/index.vue";
import fastView from "@/views/shop/goods/fast.vue";
import collectionView from "@/views/shop/collection/index.vue";
let { proxy } = getCurrentInstance();
const goodsRef = ref(null);
const fastRef = ref(null);
const collectionRef = ref(null);
const top = ref(null);
const showMenu = ref(true)
const activeName = ref('goods')
const handleOpenMenu = (op) => {
  showMenu.value = op;
  console.log('openMenu', op);
}
function taggleMode(val) {
  activeName.value = val;
}
</script>
<template>
  <el-container class="container">
    <el-header class="header">
      <top-view ref="top" @openMenu="handleOpenMenu" @taggleMode="taggleMode"></top-view>
    </el-header>
    <el-main class="main">
      <!-- 普通商品 -->
      <goods-view ref="goodsRef" v-if="activeName === 'goods'" @taggleMode="taggleMode"></goods-view>
      <!-- 快速选择 -->
      <fast-view ref="fastRef" v-if="activeName === 'fast'" @taggleMode="taggleMode"></fast-view>
      <collection-view ref="collectionRef" v-if="activeName === 'collection'"
        @taggleMode="taggleMode"></collection-view>
    </el-main>
    <el-dialog title="提示" :visible.sync="showMenu" width="100%" append-to-body>
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showMenu = false">取 消</el-button>
        <el-button type="primary" @click="showMenu = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  .header {
    margin-left: 17px;
    height: 100px;
  }
  .main {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    .main-left {
      max-width: 40%;
      flex: 50%;
      margin-right: 15px;
    }
    .main-center {
      flex: 20%;
      margin-right: 15px;
    }
    .main-right {
      flex: 30%;
    }
  }
}
</style>
